src/tedi/components/form/textarea/textarea.tsx (2)

109-121: Redundant useEffect hooks for height calculation.

Both effects call calculateHeight() when autoGrow is true:

• Lines 109-115: Triggers on value change with requestAnimationFrame
• Lines 117-121: Triggers on mount/dependency change synchronously

The second effect (117-121) is largely redundant since handleRef (line 137) already calls calculateHeight() on mount via setTimeout. Additionally, the first effect already covers value changes.

♻️ Consolidate into a single effect

  useEffect(() => {
    if (autoGrow) {
      requestAnimationFrame(() => {
        calculateHeight();
      });
    }
  }, [value, autoGrow, calculateHeight]);

- useEffect(() => {
-   if (autoGrow && textareaRef.current) {
-     calculateHeight();
-   }
- }, [autoGrow, calculateHeight]);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/tedi/components/form/textarea/textarea.tsx` around lines 109 - 121,
Remove the redundant useEffect that synchronously calls calculateHeight (the one
which depends on [autoGrow, calculateHeight]) and consolidate height logic into
a single effect: keep the existing effect that watches [value, autoGrow,
calculateHeight] and uses requestAnimationFrame to call calculateHeight for
value changes and initial mount; ensure initial mount is still covered (you can
call calculateHeight via requestAnimationFrame when autoGrow is true and
textareaRef.current exists). This touches calculateHeight, textareaRef,
handleRef, autoGrow, value, requestAnimationFrame and setTimeout (leave
handleRef’s setTimeout as-is or remove its calculateHeight call if you fully
rely on the consolidated effect).

---

60-60: Unused textareaHeight state creates unnecessary complexity.

The textareaHeight state (line 60) and the effect that updates it (lines 166-175) are disconnected from the actual height management. The calculateHeight function directly mutates textarea.style.height (line 98), bypassing React state entirely. Meanwhile, customInputProps uses textareaHeight which starts as 'auto' and only gets updated after the DOM mutation.

This creates:

1. An unnecessary re-render cycle when textareaHeight state updates
2. A brief moment where customInputProps provides height: 'auto' before syncing

Consider simplifying by either:

• Removing the textareaHeight state and relying solely on direct DOM manipulation (current approach already works this way)
• Or using state-driven height exclusively and removing the direct style.height assignments

♻️ Simplified approach: remove unused state

- const [textareaHeight, setTextareaHeight] = React.useState<string | number>('auto');

  const customInputProps = React.useMemo(() => {
    if (autoGrow) {
      return {
        rows: minRows,
        style: {
          ...(maxHeight ? { maxHeight } : {}),
          overflow: 'hidden',
-         height: textareaHeight,
        },
      };
    } else {
      // ... non-autoGrow case
    }
- }, [autoGrow, minRows, maxHeight, height, textareaHeight]);
+ }, [autoGrow, minRows, maxHeight, height]);

- useEffect(() => {
-   if (autoGrow && textareaRef.current) {
-     const updateHeight = () => {
-       if (textareaRef.current) {
-         setTextareaHeight(textareaRef.current.style.height);
-       }
-     };
-     updateHeight();
-   }
- }, [autoGrow, value]);

Also applies to: 144-175

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/tedi/components/form/textarea/textarea.tsx` at line 60, Remove the unused
React state and effect: delete the textareaHeight state declaration and any
calls to setTextareaHeight, and remove the effect that updates textareaHeight
(which references calculateHeight). Update customInputProps to stop using
textareaHeight for the height prop so it no longer supplies height:'auto' (let
calculateHeight continue to set textarea.style.height directly). Ensure
calculateHeight remains and is invoked where it was before (e.g., on
input/change and mount) so the textarea height is managed solely via direct DOM
mutation.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

src/tedi/components/form/textarea/textarea.spec.tsx (1)

89-127: ⚠️ Potential issue | 🟡 Minor

Always restore the global mocks, even on failure.

These tests still patch window.getComputedStyle, and the second one also overrides HTMLTextAreaElement.prototype.scrollHeight, without guaranteed cleanup. If an assertion or user.type() throws, later tests inherit the patched globals and become flaky; the second test never restores scrollHeight at all.

🧹 Suggested cleanup pattern

   it('grows height when typing with autoGrow=true', async () => {
     const user = userEvent.setup();
-    const originalGetComputedStyle = window.getComputedStyle;
-    window.getComputedStyle = jest.fn().mockImplementation((el) => ({
-      ...originalGetComputedStyle(el),
-      lineHeight: '20px',
-      paddingTop: '8px',
-      paddingBottom: '8px',
-    }));
-
     const originalScrollHeightDescriptor = Object.getOwnPropertyDescriptor(
       HTMLTextAreaElement.prototype,
       'scrollHeight'
     );
-    Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {
-      configurable: true,
-      get() {
-        return 100 + (this.value.split('\n').length - 1) * 40;
-      },
-    });
-
-    render(<TextArea {...defaultProps} autoGrow minRows={3} maxRows={10} />);
-    ...
-
-    window.getComputedStyle = originalGetComputedStyle;
-    if (originalScrollHeightDescriptor) {
-      Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', originalScrollHeightDescriptor);
-    } else {
-      delete (HTMLTextAreaElement.prototype as UnknownType).scrollHeight;
-    }
+    const originalGetComputedStyle = window.getComputedStyle;
+
+    try {
+      window.getComputedStyle = jest.fn().mockImplementation((el) => ({
+        ...originalGetComputedStyle(el),
+        lineHeight: '20px',
+        paddingTop: '8px',
+        paddingBottom: '8px',
+      }));
+
+      Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {
+        configurable: true,
+        get() {
+          return 100 + (this.value.split('\n').length - 1) * 40;
+        },
+      });
+
+      render(<TextArea {...defaultProps} autoGrow minRows={3} maxRows={10} />);
+      ...
+    } finally {
+      window.getComputedStyle = originalGetComputedStyle;
+      if (originalScrollHeightDescriptor) {
+        Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', originalScrollHeightDescriptor);
+      } else {
+        delete (HTMLTextAreaElement.prototype as UnknownType).scrollHeight;
+      }
+    }
   });

Apply the same try/finally restoration to the maxRows test.

Also applies to: 133-166

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/tedi/components/form/textarea/textarea.spec.tsx` around lines 89 - 127,
The test patches window.getComputedStyle and
HTMLTextAreaElement.prototype.scrollHeight but does not guarantee restoration on
failure; wrap the setup and assertions in a try/finally in the TextArea
autoGrow/maxRows tests so the original window.getComputedStyle and
originalScrollHeightDescriptor are restored in the finally block; locate the
test that calls render(<TextArea {...defaultProps} autoGrow minRows={3}
maxRows={10} />) and the other maxRows test and move the mocking of
getComputedStyle and Object.defineProperty for scrollHeight into the try section
and perform window.getComputedStyle = originalGetComputedStyle and restore
HTMLTextAreaElement.prototype.scrollHeight (using originalScrollHeightDescriptor
or delete fallback) inside finally to ensure cleanup even if assertions or
user.type() throw.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes